/* eslint-disable react/no-array-index-key */
import React from 'react';
import cn from 'classnames';
import styles from './index.less';

const CLASS_NAME_ENUM = {
    HORIZONTAL: 'horizontal',
    VERTICAL: 'vertical'
};

export default function Split({ type = CLASS_NAME_ENUM.HORIZONTAL, children, space, className }) {
    const arr = children.filter(_ => _).filter(_ => React.isValidElement(_));
    return (
        <div
            className={cn(
                className,
                styles.split,
                {
                    [styles[CLASS_NAME_ENUM.HORIZONTAL]]: type === CLASS_NAME_ENUM.HORIZONTAL,
                    [styles[CLASS_NAME_ENUM.VERTICAL]]: type === CLASS_NAME_ENUM.VERTICAL
                },
                space ? styles.space : styles.common
            )}
        >
            {arr.map((item, key) => (
                <React.Fragment key={key}>{item}</React.Fragment>
            ))}
        </div>
    );
}
